<template>
  <div class="question">
    <div class="wrapper w flex-jac">
      <div class="question__header flex-jac">
        <span class="question__header__title">如何提问</span>
      </div>
      <div class="question__content flex">
        <div class="flex-jc" style="flex-direction: column; gap: 3px;">
          <p>先搜索，再提问</p>
          <p>提问前先在 Google、百度或者社区先行搜索。这样能更快地帮你找到答案。即使没找到，在看了相关或类似的问题之后，你的提问会更准确。</p>
        </div>
        <div class="search flex-ac">
          <el-input placeholder="搜索你遇到的问题" style="width: 400px;" />
          <button class="btn">搜索</button>
        </div>
        <div v-for="item, index in arr" :key="index">
          <span>{{ index }}</span>
          <div v-for="v in item" :key="v">
            <SvgIcon name="dui" />
            <span>{{ v }}</span>
          </div>
        </div>
        <div>
          <p>或许最后得到的答案并不是你最想要的，但深思熟虑过的问题依旧可能会让你有其他方面的收获。每个人的成长都是一步步来的，所以，
            Keep an open mind。</p>
        </div>
      </div>
      <div class="question__footer flex-jac">
        <button class="btn">我已知晓,继续提问</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const arr = {
  "提问要求": ["主题与编程技术、程序算法、开发工具相关", "标题清晰，不笼统，不做标题党", "内容包含问题的诉求，必要的运行环境、文本代码、运行截图、期望结果", "使用 Markdown 语法排版，易于阅读 准确使用标签关联问题", "多个问题请分别提问"],
  "不该问的": ["别人已经问过的重复问题", "没有尝试找过寻找答案，直接就问", "征询产品、服务推荐", "程序评比投票，没有结论的观点讨论", "任何与开发无关的问题"]
}

</script>

<style lang="scss" scoped>
.question {
  background-color: #e9ecef;
  padding: 20px;

  .wrapper {
    background-color: #fff;
    border-radius: 6px;
    flex-direction: column;
    gap: 20px;
  }

  &__header {
    width: 100%;
    padding: 20px 0;

    &__title {
      color: #2C2C2C;
      font-size: 36px;
      line-height: 1;
    }
  }

  &__content {
    gap: 10px;
    flex-direction: column;
    font-size: 18px;
    padding: 20px;

    .search {
      gap: 10px;

      >button {
        padding-left: 40px;
        padding-right: 40px;
        background-color: $color;
      }
    }
  }

  &__footer {
    width: 100%;
    border-top: 1px solid #efefef;
    padding: 20px 0;

    >button {
      background-color: $color;
      color: #fff;
      font-size: 18px;
    }
  }
}
</style>